<template>
  <div class="relative inline-flex items-center justify-center">
    <svg
      class="w-16 h-16 transform -rotate-90"
      :width="size"
      :height="size"
    >
      <circle
        :cx="center"
        :cy="center"
        :r="radius"
        :stroke-width="strokeWidth"
        fill="none"
        stroke="currentColor"
        class="text-gray-200"
      />
      <circle
        :cx="center"
        :cy="center"
        :r="radius"
        :stroke-width="strokeWidth"
        fill="none"
        stroke="currentColor"
        class="text-primary-600 transition-all duration-300"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
        stroke-linecap="round"
      />
    </svg>
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="text-sm font-semibold text-gray-900">
        {{ Math.round(progress) }}%
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  progress: number
  size?: number
  strokeWidth?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 64,
  strokeWidth: 4
})

const center = computed(() => props.size / 2)
const radius = computed(() => center.value - props.strokeWidth)
const circumference = computed(() => radius.value * 2 * Math.PI)
const offset = computed(() => circumference.value - (props.progress / 100) * circumference.value)
</script>